<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 18134216985
  Date: 2024-04-07
  Time: 16:36
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<h2>我的报修记录</h2>
<br>
<%--条件查询--%>
<div class="layui-collapse">
    <div class="layui-colla-item">

        <h2 class="layui-colla-title">查询条件</h2>
        <div class="layui-colla-content layui-show">
            <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                <div class="layui-inline">
                    <input name="repairsType" class="layui-input" placeholder="维修类型">
                </div>
                <div class="layui-inline">
                    <input name="position" class="layui-input" placeholder="维修位置">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" onclick="search()" >查询</button>
                </div>
                <input type="hidden" name="repairpeople"  value="${sessionScope.loginUser.ownername}">
            </div>
        </div>
    </div>
</div>


<script type="text/html" id="barDemo">
    <button class='layui-btn layui-btn-sm layui-btn-danger' lay-event='details'>详情</button>
</script>
<table class="layui-hide" id="ID-table-demo-data" lay-filter="repairingTable"></table>
<%--详情--%>
<div id="details" style="display:none;padding:20px">

    <form class="layui-form" id="detailsform" lay-filter="detailsform">
     <table class="layui-tab" style="width: 400px;height: 400px">
         <tr>
             <td id="id"></td>
         </tr>
         <tr>
             <td id="position"></td>
         </tr>
         <tr>
             <td id="imgs">

             </td>
         </tr>
         <tr>
             <td id="repairtype"></td>
         </tr>
         <tr>
             <td id="repairpeople"></td>
         </tr>
         <tr>
             <td id="phone"></td>
         </tr>
         <tr>
             <td id="hopetime"></td>
         </tr>

         <tr>
             <td id="repstateid"></td>
         </tr>
         <tr>
             <td id="plotid"></td>
         </tr>
         <tr>
             <td id="employee"></td>
         </tr>
         <tr>
             <td id="money"></td>
         </tr>
         <tr>
             <td id="istype"></td>
         </tr>
     </table>
    </form>
</div>
<script>
    let $=layui.$;
    let table = layui.table;
    let laydate = layui.laydate;
layui.use(["table","laydate"],function (){
    laydate.render({
        elem:"[name=hopetime]"
        ,format : "yyyy/MM/dd"
    });
    table.render({
        id:'recording',
        elem:"#ID-table-demo-data",
        url:"/Repairs/selectRepairing",
        page:true,
        cols:[[
            {field:'number',align: 'center',type:'numbers',title:"编号"},
            {field:'id',align: 'center',hide:true,title:"序号"},
            {align: 'center',field: 'position',title: '报修位置'},
            {align: 'center',field: 'repairtype',title: '报修描述'},
            {align: 'center',field: 'repstateid',title: '报修状态',templet(d){
                    return d.repairstate == null ? "-" : d.repairstate.statename;
                }},
            {align: 'center',title: '员工',templet(d) {
                    return d.user == null ? "-" : d.user.username;
                }},
            {align: 'center',title: '操作',toolbar:"#barDemo"},
        ]]
    })
    var search=layui.form.val('searchForm');
    console.log(search)
    layui.table.reload('recording', {
        where: search
    });
})
    table.on("tool(repairingTable)",function (obj){
        if(obj.event=="details"){
            details(obj);
        }

    })
    function details(obj){
    $("#dimg").remove()
    console.log(obj.data)
       $("#position").text("报修位置："+obj.data.position)
        $("#repairtype").text("报修描述："+obj.data.repairtype);
$("#repairpeople").text("报修人："+obj.data.repairpeople);
$("#phone").text("联系电话："+obj.data.phone);
$("#hopetime").text("预约时间："+obj.data.hopetime);
$("#repstateid").text("状态："+obj.data.repairstate.statename)
        $("#plotid").text("小区："+obj.data.plot.plotname)
        if(obj.data.user==null){
            $("#employee").text();
        }else {
            $("#employee").text("员工："+obj.data.user.username);
        }
if(obj.data.money==null){
    $("#money").text();
}else{
    $("#money").text("价格："+obj.data.money);
}
if(obj.data.img==null){
}else{
    let img=$("<img id='dimg' src='/"+obj.data.img+"' alt='' width='200px' height='200px'>")
    $(img).appendTo($("#imgs"))
}


if(obj.data.istype==1){
    $("#istype").text("报修类型：居家维修")
}else if(obj.data.istype==0){
    $("#istype").text("报修类型：公共维修")
}

        layui.layer.open({
            type:1,
            title:"详情",
            content:$("#details"),
            area:["500px","550px"],
            btn:["取消"],
    })
    }
    //点击查询
    function search(){
        var search=layui.form.val('searchForm');
        console.log(search)
        layui.table.reload('recording', {
            page: {
                curr:1
            },
            where: search
        });
    }
</script>
</body>
</html>
